<style>

.tapop {
    width:5.72rem;
    height:80vh;
    border-radius: 4px;
}

.tapop h2 {
    font-family: PingFangSC-Medium;
    font-size: 0.36rem;
    color: #333333;
    text-align: center;
    padding:0.36rem 0 0.2rem;
}

.tapop > div {
    text-align: center
}

.music_pay_lyric {
    border-top:0.2rem solid rgb(249, 249, 248);
    height: 50vh;
    width:100%;
    overflow-y: auto;
    padding-bottom:0.6rem;
    margin-bottom:0.2rem;
    box-sizing: border-box;
    background-color: #fff;
}

.music_pay_lyric .lyric_title {
    width:100%;
    border-top:1px solid#E9EAEC;
    position: relative;
    display: flex;
    justify-content: center;
    height: 0.8rem;
}

.music_pay_lyric .lyric_title h2 {
    display: flex;
    align-items: flex-end;
    transform: translate(0, -0.1rem)
}
.music_pay_lyric .lyric_title span{
    width:1.17rem;
    height: 0.18rem;
    opacity: 0.25;
    background-color: #F0E3C9;
    display: inline-block;
    position: absolute;
    left:50%;
    top:0.6rem;
    transform: translate(-50%, 0)
}
</style>

<style scoped>
[v-cloak]{
    display: none;
}


.music_pay_cover {
    width:2.4rem;
    height: 2.4rem;
    background: #D8D8D8;
    border-radius: 4px;
    margin:0 auto 0.5rem;
    display: flex;
    position: relative;
}

.music_icon {
    width:1.16rem;
    height: 1.28rem;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index: 1;
}

.operation {
    width:1rem;
    height: 1rem;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index: 2;
}


/* 
.tapop p {
    width:100%;
    padding: 0.2rem 0.48rem;
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    color: #333333;
    height: 70vh;
    overflow-y: auto;
    box-sizing: border-box;
} */

.lyric_content {
    font-size: 0.28rem;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    margin-top: 0.34rem;
    line-height: 0.44rem;
    overflow-y: auto;

}



.music_pay_process {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding:0 0.3rem;
}

.music_pay_process > span {
    font-family: PingFangSC-Semibold;
    font-size: 0.24rem;
    color: #999;
}


.music_pay_query i.icon-jieshaoxiangqing {
    position: absolute;
    font-size:0.3rem;
    right:0.5rem;
    bottom: 1.26rem;
    color:#999;
}


.custom-button {
    background: #AB946C;
    width:0.2rem;
    height: 0.2rem;
}
.music_pay_query {
    position: relative;
    background: #fff;
    padding-bottom:0.5rem;
    border-bottom:1px solid#E9EAEC;

    /* border-bottom:0.2rem solid rgb(249, 249, 248); */
}

/* .music_pay_query img {
    width:2.4rem;
    height: 2.4rem;
    
} */

.music_pay_cont_icon_list {
    display: flex;
    padding:0 0.8rem 0.47rem;
    justify-content: space-evenly;
    width: 100%;
    box-sizing: border-box;
}

.music_pay_cont_icon_list .icon {
    display: flex;
    align-items: center;
    font-size: 0.24rem;
    color: #999;
    flex:1;
    justify-content: center;
}

.music_pay_cont_icon_list .icon .iconfont {
    margin-right:0.12rem;
}



.music_pay_cont {
    width: 100%;
    background: #fff;
}

.music_pay .title {
    font-family: PingFangSC-Medium;
    font-size: 0.36rem;
    color: #333333;
    text-align: center;
    padding:0.5rem 0 24px;
}

/* .music_pay {
    height: 100vh;
    background-color: #fff;
} */

.music_pay {
    width:7.5rem;
    height: 100vh;
    overflow: hidden;
}
</style>

<template>
    <div class="music_pay" v-cloak id="music_pay">
        <van-nav-bar  title="" left-text="返回" right-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight" class="fixed">
            <van-icon slot="right" name="http://tmpfile.nbyh.mejimeji.net/zf_01.png" />
        </van-nav-bar>
        <div class="music_pay_cont mt46">
            <h2 class="title">{{ dataJson.musicname }}</h2>
            <div class="music_pay_cont_icon_list">
                <div class="icon">
                    <i class="iconfont icon-bofang"></i> {{ dataJson.visitnum }}
                </div>

                <!-- <div class="icon">
                    <i class="iconfont icon-fenxiang"></i> 76.4万
                </div> -->

                <div class="icon">
                    <i class="iconfont icon-daohanglan-9"></i> {{ dataJson.author }}
                </div>

                
            </div>
        </div>

        <div class="music_pay_query">
            <div class="music_pay_cover">
                <img src="http://tmpfile.nbyh.mejimeji.net/music_icon.png" class="music_icon">
                <img src="http://tmpfile.nbyh.mejimeji.net/play_02.png" class="music_icon_play operation" @click="startPlayOrPause" v-if="!audio.playing">
                <img src="http://tmpfile.nbyh.mejimeji.net/pause_01.png" class="music_icon_pause operation" @click="startPlayOrPause" v-else>

                <audio 
                    preload="auto"
                    :src="url"
                    controls="controls" 
                    style="display:none" 
                    ref='audio'
                    @pause="onPause"
                    @play="onPlay"
                    @timeupdate="onTimeupdate" 
                    @loadedmetadata="onLoadedmetadata"
                >
                  
                </audio>
            </div>
            <div class="music_pay_process">
                <span>{{ audio.residue }}</span>
                <van-slider v-model="audio.currentPercentage" bar-height="2px" active-color="#AB946C" inactive-color="#F7EEDE" @change="changeCurrentTime">
                    <div slot="button" class="custom-button"> </div>
                    <!-- {{ audio.currentPercentage }} -->
                </van-slider>
                <span>{{ realFormatSecond(audio.maxTime) }}</span>
            </div>
            
            <i class="iconfont icon-jieshaoxiangqing" @click="show = !show"></i>
        </div>

        <div class="music_pay_lyric" >
            <div class="lyric_title">
                <h2>{{ type== 'dhikr' ? '经文' : '歌 词'}}</h2>
                <span></span>
            </div>

            <div class="lyric_content" v-html="dataJson.lyric">
            </div>
        </div>


        <van-popup v-model="show">
            <div class="tapop" >
                <h2>音频介绍</h2>
                <div v-html="dataJson.content"></div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"
import Vue from 'vue'
export default {
    data(){
        return {
            show:false,
            url:'https://wdd.js.org/element-audio/static/falling-star.mp3',
            process:0,
            type:'',
            audio: {
                // 该字段是音频是否处于播放状态的属性
                playing: false,
                currentTime:0,
                maxTime:0,
                residue:"00:00",
                currentPercentage:0
            },

            dataJson:{}
        }
    },
    
    mounted(){
        this.getMusic(this.$route.query.id)

        this.type = this.$route.query.type

        // document.getElementById('music_pay').addEventListener('touchmove', function(e){
        //     e.preventDefault()
        // }, { passive: false })
    },

    methods: {
        //寺庙列表
        async getMusic(id) {	
            const data = await getResponses(`/fochina/query/musicdetail/json`,{'musicid':id})
            
            
            if(data.code === '0000') {
                let idata = data.data
                this.dataJson = idata
                this.url = idata.musiclink    
            } else {
                console.log(data.error)
            }
        },

        onClickLeft() {
            this.$router.go(-1)
        },

        onClickRight() {

        },

        // 控制音频的播放与暂停
        startPlayOrPause () {
            return this.audio.playing ? this.pause() : this.play()
        },
        // 播放音频
        play () {
            this.$refs.audio.play()
        },
        // 暂停音频
        pause () {
            this.$refs.audio.pause()
        },
        // 当音频播放
        onPlay () {
            this.audio.playing = true
        },
        // 当音频暂停
        onPause () {
            this.audio.playing = false
        },

        // 处理时间
        realFormatSecond(second) {
            var secondType = typeof second

            if (secondType === 'number' || secondType === 'string') {
                second = parseInt(second)

                var hours = Math.floor(second / 3600)
                second = second - hours * 3600
                var mimute = Math.floor(second / 60)
                second = second - mimute * 60

                return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
            } else {
                return '0:00:00'
            }
        },

        // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
        onTimeupdate(res) {
            this.audio.currentTime = res.target.currentTime
            this.audio.residue = this.realFormatSecond(this.audio.currentTime)
            this.audio.currentPercentage = this.audio.currentTime/this.audio.maxTime * 100
            // this.$emit('setResidue', this.realFormatSecond(this.audio.maxTime - this.audio.currentTime), this.audio.currentTime/this.audio.maxTime * 100)
        },

        // 修改歌曲进度
        changeCurrentTime(index) {
            this.$refs.audio.currentTime = parseInt(this.audio.currentPercentage / 100 * this.audio.maxTime)
        },
        
        // 修改音频进度
        changeVolume(index) {
            this.$refs.audio.volume = index / 100

        },
        // 当加载语音流元数据完成后，会触发该事件的回调函数
        // 语音元数据主要是语音的长度之类的数据
        onLoadedmetadata(res) {
            this.audio.maxTime = parseInt(res.target.duration)
            this.$emit('setMaxTime', this.realFormatSecond(this.audio.maxTime))
        }
    }
}
</script>
